<template>
    <el-dialog class="ui-scan-pay-dialog" v-model="dialogVisible" :title="dialogTitle" :close-on-click-modal="false" :close-on-press-escape="false" ref="dialog" @opened="init" @closed="finalThings">
        <el-form ref="form" :model="data" @submit.prevent="onAuthCodeInput" v-show="stage == 0">
            <el-form-item label="付款码:" label-width="5rem" prop="code" >
                <el-input v-model="data.code" ref="codeIpt" autofocus>
                    <template #prefix>
                        <i class="ui-ico ui-ico-qr-code"></i>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <div v-if="stage==1">
            {{ message }}
        </div>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="primary" @click="onCancel" :disabled="loading"><i :class="['ui-ico', loading?'ui-ico-loading':'ui-ico-exit']" /> &nbsp; 取消(Esc)</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus';
import { speak } from '../../uiframe/voice';
import { getPayCodeType } from '../../uiframe/utils';
import { useSocket } from '../../uiframe/services/socket';
export default {
    props:{
        q:Object,
        done: Function,
        total_fee:Number,
        onSuccess:Function,
    },
    setup(props)
    {
        let timeoutId = null, timeout = 45, code = null,data = reactive({
            data:{},
            stage: 0, // 0 等待付款码 1 等待付款确认
            dialogVisible: true,
            dialogTitle:'扫码收款',
            dragabletable:null,
            form:null,
            codeIpt:null,
            message:'',
            loading:false,
        });

        speak('请出示付款码', true);

        const methods = {
            onCancel : ()=>{
                //点击了取消
                if(data.stage == 0){
                    data.dialogVisible = false;
                }else{
                    if(data.loading) return;
                    data.loading= true;
                    useSocket().then(socket=>{
                        socket.rpc('micropay.cancel', {code}, 18000).then(res=>{
                            data.loading= false;
                        }).then(err=>{
                            data.loading= false;
                        })
                    })
                }
            },
            finalThings: () =>props.done(),
            init:()=>data.codeIpt.focus(),
            onAuthCodeInput:()=>{
                code = data.data.code
                if(!code){
                    ElMessage({type:'error',message:'付款码错误.'});
                    return false;
                }

                props.onSuccess(code, timeout).update((res)=>{
                    console.log('on update message:', res)
                    if(data.stage == 0) {
                        data.stage = 1;
                        data.dialogTitle = `等待用户完成付款(${timeout})`;
                        timeoutId = setInterval(() => {
                            timeout --;
                            data.dialogTitle = `等待用户完成付款(${timeout})`;
                            if(timeout == 0){
                                clearInterval(timeoutId); timeoutId=null;
                            }
                        }, 1000);
                    }
                    data.message = res.message;
                    //显示状态信息.
                }).then(res=>{
                    props.q.resolve(res);
                    data.dialogVisible = false;
                }).catch(err=>{
                    props.q.reject(err);
                    data.dialogVisible = false;
                })
            },
            onSure:()=>{
                code = data.data.code
                if(!code){
                    ElMessage({type:'error',message:'付款码错误.'});
                    return false;
                }
                let src = getPayCodeType(code);
                let payload = {code, src, total_fee: data.total_fee};
                if(false == src){
                    ElMessage({type:'error',message:'无效的付款码.'});
                }else{
                    props.q.resolve({success:true, data: payload});
                    data.dialogVisible = false;
                }
            }
        }
        
        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>

<style lang="scss">
.ui-scan-pay-dialog{
    width: 36rem;
    max-width: 36rem;
    min-width: 36rem;
}
</style>